<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}" />
    <title>机型管理</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
    <div class="app-page">
        <div class="app-page-header">
            <div class="page-title">
                <div class="title">终端管理>机型管理</div>
                <div class="btn-group">
                    <button class="z-btn z-primary" data-popup-open=".popup-add">新增</button>
                </div>
            </div>
        </div>
        <div class="app-page-content">
            <div class="app-card">
                <div class="app-card-body">
                    <div class="z-btn-group z-mab">
                        <a class="batch-delete z-btn z-primary">批量删除</a>
                    </div>
                    <table class="z-table">
                        <thead>
                            <th></th>
                            <th>
                                <input type="checkbox" class="input j-checkbox-all">
                            </th>
                            <th>ID</th>
                            <th>终端型号</th>
                            <th>备注</th>
                            <th>修改时间</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            <tr th:each="model: ${deviceModelList}" th:attr="data-id=${model.deviceModelId}">
                                <td class="btn-expand z-center">
                                    <i class="fa fa-angle-right"></i>
                                </td>
                                <td>
                                    <input type="checkbox" class="input j-checkbox">
                                </td>
                                <td th:text="${model.deviceModelId}"></td>
                                <td th:text="${model.deviceModel}"></td>
                                <td th:text="${model.description}"></td>
                                <td th:text="${model.updateTime}"></td>
                                <td class="btn-group">
                                    <a class="btn-delete">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 分页信息 -->
                    <div class="app-card-body">
                        <!-- 前端分页 -->
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增 -->
    <div class="popup-add popup-default z-popup z-fixed z-df z-flex-cc z-hide">
        <div class="bg" data-popup-close></div>
        <div class="body">
            <div class="title">新增</div>
            <div class="content">
                <form>
                    <div class="form-item row">
                        <div class="label">
                            <label>终端型号</label>
                        </div>
                        <div class="body">
                            <input type="text" name="deviceModel" data-name="终端型号" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>备注</label>
                        </div>
                        <div class="body">
                            <input type="text" name="description" data-name="备注" data-rule="required">
                        </div>
                    </div>
                </form>
                <div class="z-btn-group">
                    <a class="btn-submit z-btn z-primary">确定</a>
                    <a class="z-btn z-default" data-popup-close>取消</a>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/lib/jquery.min.js}"></script>
    <script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
    <script th:src="@{/js/popup.js}"></script>
    <script th:src="@{/js/form.js}"></script>
    <script th:src="@{/js/admin/app.js}"></script>
    <script th:src="@{/js/admin-upload.js}"></script>
    <script th:src="@{/js/pagination.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        //获取context path
        //var context = $("meta[name='ctx']").attr("content");
        var context = $("meta[name='ctx']").attr("content") || '';

        //分页操作
        //从Model中获取当前页、每页显示条数及总条数
        var pageNum =  [[${pageNum}]];// 当前页数
        var pageSize = [[${pageSize}]];// 每页数量
        var total = [[${total}]];// 总条数
        var pagination = new Pagination(".pagination", {
            pageIndex: pageNum, // 当前页数
            pageSize: pageSize, // 每页数量
            count: total, // 总条数
            maxButtonCount: 5, // 分页按钮数量(可选)
            // 分页切换事件
            onPageChanged: function(pageIndex) {
                window.location.href = context + "/deviceModel/listPage?pageNum=" + pageIndex + "&pageSize=" + pageSize;
            }
        })
        // 保存
        var form = $(".popup-add form").form({
            submitSelector: ".popup-add .btn-submit",
            msg: function(msg) {
                popup.tipsTop(msg, 'warning');
            },
            submit: function() {
                var data = {};
                $.each($(".popup-add form").serializeArray(), function(index, field) {
                    if (data[field.name]) {
                        data[field.name] += "," + field.value;
                    } else {
                        data[field.name] = field.value;
                    }
                })
                $.ajax({
                    type:"POST",
                    url :context + "/deviceModel/save",
                    data:data,
                    success: function(obj) {
                        console.log(obj);
                        var code = obj.code;
                        if (code == 0) {
                            alert(obj.msg);
                            window.location.href = context + "/deviceModel/listPage?pageNum=" + 1 + "&pageSize=" + pageSize;
                        } else {
                            alert(obj.msg);
                        }
                    }
                })
            }
        })

        // 批量删除
        $('.batch-delete').click(function(params) {
            var id = getSelecteId();
            if (id != '') {
                if (confirm('确认是否删除')) {
                    $.ajax({
                        type:"POST",
                        url :context + "/deviceModel/delete",
                        data:{
                            deviceModelIds : id
                        },
                        success: function(obj) {
                            var code = obj.code;
                            if (code == 0) {
                                alert(obj.msg);
                                window.location.href = context + "/deviceModel/listPage?pageNum=" + pageNum + "&pageSize=" + pageSize;
                                //重新查询一下页面
                            } else {
                                alert(obj.msg);
                            }
                        }
                    })
                }
            } else {
                popup.tipsTop("请选择需要删除的数据", 'warning');
            }
        })

        // 删除
        $('.btn-delete').click(function(params) {
            var data = $(this).parents('tr')[0].dataset;
            console.log(data["id"]);
            if (confirm('确认是否删除')) {
                $.ajax({
                    type:"POST",
                    url :context + "/deviceModel/delete",
                    data:{
                        deviceModelIds : data["id"]
                    },
                    success: function(obj) {
                        var code = obj.code;
                        if (code == 0) {
                            alert(obj.msg);
                            window.location.href = context + "/deviceModel/listPage?pageNum=" + pageNum + "&pageSize=" + pageSize;
                        } else {
                            alert(obj.msg);
                        }
                    }
                })
            }
        })

        // 获取表格中选择的ID
        function getSelecteId() {
            let temp = [];
            $('tbody [type="checkbox"]').each(function(index, element) {
                if (element.checked == true) {
                    temp.push($(this).parents('tr').data('id'));
                }
            })
            return temp.join(',');
        }
    </script>
</body>

</html>